<template>
    <div>
        <v-container v-if="logs.length > 0">
            <div v-for="item of logs" :key="item.id">
                 <div class="pt-1">
                    <span class="subtitle-2">{{item.user ? item.user.name : ''}}</span>
                    <span class="ml-4 text-caption">{{item.created_at}}</span>
                </div>
                <div class="pb-1 my-2">{{item.comment}}</div>
                <v-divider ></v-divider>
            </div>
            <v-row dense v-if="totalPage > 1" >
                <v-col cols="12">
                    <v-btn text block @click="loadMore">加载更多</v-btn>
                </v-col>
            </v-row>
        </v-container>

        <v-footer
            app
            height="72"
            inset
            color="white"
        >
            <v-text-field
                dense
                flat
                hide-details
                rounded
                outlined
                v-model="comment"
                placeholder="添加跟踪记录信息"
            >
                <template v-slot:append-outer>
                    <v-btn color="primary" class="mt-n2" depressed
                        :disabled="comment.length == 0"
                        @click="saveComment"
                        :loading="savingComment">保存</v-btn>
                </template>
            </v-text-field>
        </v-footer>
    </div>
</template>

<script>
    import axios from "axios";
    import AutocompleteOrg from "../../../widgets/AutocompleteOrg.vue";
    import AutocompleteUser from "../../../widgets/AutocompleteUser.vue";
    import { mapGetters } from 'vuex';

    export default {
        data: () => ({
            id: 0,
            logs: [],
            comment: '',
            savingComment: false,
            pageNo: 1,
            pageSize: 20,
            totalPage: 0
        }),

        components: {
            AutocompleteOrg: AutocompleteOrg,
            AutocompleteUser: AutocompleteUser
        },

        computed: {
            ...mapGetters([
                'is_supper',
                'is_manager'
            ]),
        },

        watch: {
            id(v) {
                this.logs = [];
                this.pageNo = 1;
                this.totalPage = 0;
                this.loadLogs();
            }
        },

        created() {
            this.id = this.$route.params.id;

        },

        beforeRouteUpdate(to, from, next) {
            this.id = to.params.id;
            next();
        },

        methods: {
            loadMore() {
                this.pageNo++;
                this.loadLogs();
            },
            loadLogs() {
                  axios.get(`/loan/${this.id}/log`, { params:
                    {
                        pageSize: this.pageSize,
                        page: this.pageNo
                    }
                }).then((response) => {
                    if(response.data.code == 0) {
                        this.logs = this.logs.concat(response.data.data.data);
                        if (response.data.data.data.length == 0 ) {
                            // hide loadmore
                            this.totalPage = 0;
                        } else {
                            this.totalPage = response.data.data.last_page;
                        }
                    }
                })
                .catch(function () {})
                .then(function () {
                });
            },
            saveComment() {
                const that = this;
                that.savingComment = true;
                axios.post(`/loan/${this.id}/log`, {comment : this.comment})
                .then((response) => {
                    if (response.data.code == 0) {
                        that.comment = '';
                        that.logs.unshift(response.data.data);
                    }
                    this.$toast.open({
                        message: response.data.msg,
                        type: response.data.code == 0 ? 'success' : 'error',
                        position: 'top-right',
                    });
                })
                .catch(function () {})
                .then(function () {
                    that.savingComment = false;
                });
            }
        }
    }
</script>
